<template>
  <div class="hello">
    <p>-----------------------</p>
    <h1>{{ msg }} -- {{value}}</h1>
    <button @click="loginParamFn()">logFn</button>
    <span>
       <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" >
    </span>
    <p>-----------------------</p>
  </div>
</template>
<script>
// <input ref="input" :value="value" @input="updateValue($event.target.value)" >

export default {
  name: 'child',
  props: ['value'],
  data () {
    return {
      msg: 'this is the child component',
    }
  },
  methods:{
      loginParamFn:function(){
          console.log('child',this.value);
      },
      updateValue: function (value) {
      var formattedValue = value.trim().slice(0,
          value.indexOf('.') === -1
            ? value.length
            : value.indexOf('.') + 3
        )
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      this.$emit('input', Number(formattedValue))
    }
  },
  
}
</script>

